import React, {useEffect, useState} from "react";
import {useNavigate,useLocation} from 'react-router-dom'
import axios from "axios";

import {Layout, Menu} from "antd"
import {
    AuditOutlined, BarsOutlined, ControlOutlined, DashboardOutlined,
    EditOutlined, FrownOutlined, HighlightOutlined, HomeOutlined, MenuFoldOutlined, QqOutlined,
    SettingOutlined, SmileOutlined, SnippetsOutlined, TeamOutlined, UnorderedListOutlined,
    UploadOutlined,
    UserOutlined,
} from '@ant-design/icons';
import './index.css'
import {connect} from "react-redux";

const { Sider} = Layout

function SideMenu(props) {
    const navigate = useNavigate()
    const [menu,setMenu] = useState([])
    const {role:{rights}} = JSON.parse(localStorage.getItem("token"))
    useEffect(()=>{
        axios.get("/rights?_embed=children").then(res=>{
            setMenu(res.data)
            console.log(res.data)
        })
    },[])

    const iconList = {
        "/home":<HomeOutlined />,
        "/user-manage":<UserOutlined />,
        "/user-manage/list":<TeamOutlined />,
        "/right-manage":<UploadOutlined />,
        "/right-manage/role/list":<QqOutlined />,
        "/right-manage/right/list":<SettingOutlined />,
        "/news-manage": <SnippetsOutlined />,
        "/news-manage/add": <EditOutlined />,
        "/news-manage/draft": <HighlightOutlined />,
        "/news-manage/category": <MenuFoldOutlined />,
        "/audit-manage": <ControlOutlined />,
        "/audit-manage/audit": <AuditOutlined />,
        "/audit-manage/list": <UnorderedListOutlined />,
        "/publish-manage": <BarsOutlined />,
        "/publish-manage/unpublished": <DashboardOutlined />,
        "/publish-manage/published": <SmileOutlined />,
        "/publish-manage/sunset": <FrownOutlined />
    }

    function getItem(key, icon, label, children) {
        return {
            key,
            icon,
            label,
            children
        };
    }
    function renderMenu(menuList) {
        let items = []
        menuList.map(item=>{
            if (item.pagepermisson && rights.includes(item.key)) {
                if (item.children?.length > 0){
                    items.push(getItem(item.key, iconList[item.key], item.title,
                        renderMenu(item.children)))
                } else {
                    items.push(getItem(item.key, iconList[item.key], item.title))
                }
            }
        })
        return items
    }

    const onClick = (item)=>{
        console.log('click:', item)
        navigate(item.key)
    }

    const {pathname} = useLocation()
    const openKey = ["/"+ pathname.split("/")[1]]

    return (
        <Sider trigger={null} collapsible collapsed={props.isCollapsed}>
            <div style={{display:"flex", height:"100%","flexDirection":"column"}}>
                <div className="logo">全球新闻发布管理系统</div>
                <div style={{flex:1,"overflow":"auto"}}>
                    <Menu
                        onClick={onClick}
                        theme="dark"
                        mode="inline"
                        selectedKeys={pathname}
                        defaultOpenKeys={openKey}
                        items={renderMenu(menu)}
                    />
                </div>
            </div>
        </Sider>
    )
}
const mapStateToProps = ({CollapsedReducer:{isCollapsed}})=>{
    return {
        isCollapsed
    }
}
// export default connect(mapStateToProps)(SideMenu)
export default connect(
    state => ({
        isCollapsed: state.CollapsedReducer.isCollapsed
    })
)(SideMenu)